<script setup lang="ts">
import VDialog from "@/components/VDialog/VDialog.vue";
import { computed, reactive, ref, watch } from "vue";
import { ReportPageResponse, getReportDetailApi } from "@/api/airport/safetyManage/report.api";
import { ElMessage } from "element-plus";
import Quill from "quill";
import "quill/dist/quill.snow.css";
import {useReportHook} from "./utils/hook";

interface Props {
  modelValue: boolean;
  row?: ReportPageResponse;
}

const {
  decodeBase64
} = useReportHook();

const props = defineProps<Props>();
const emits = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set(v) {
    emits("update:modelValue", v);
  }
});

// base64 解码函数


const formData = reactive<ReportPageResponse>({
  reportId: 0,
  title: "",
  terminalType: "",
  infoSource: "",
  dutyDeptId: 0,
  discoverer: 0,
  discoveryDate: "",
  discoveryPlace: "",
  reportType: "",
  status: "0",
  fileFlag: 0,
  feedback: "",
  createTime: "",
  deptName: "",
  discoverUserName: "",
  infoDescribe: "",
  basis: "",
});

const questionSourceName = computed(() => {
  const sourceValue = formData.infoSource;
  // 如果是数字字符串则使用映射表转换，否则直接返回原始值
  return infoSourceMap[sourceValue] || sourceValue || '';
});

const statusMap = {
  "0": { text: "待接收", type: "info" },
  "1": { text: "待建模", type: "warning" },
  "2": { text: "已关闭", type: "success" },
  "3": { text: "已建模-问题待提交", type: "primary" },
  "4": { text: "已建模-已提交问题", type: "success" },
  "5": { text: "未建模-已提交问题", type: "success" }

};


const loading = ref(false);
const quillContainerRef = ref<HTMLDivElement | null>(null);
let quill: Quill | null = null;
// 新增：信息来源映射表
const infoSourceMap = {
  '1': '风险识别',
  '2': '隐患排查',
  '3': '安全质量检查',
  '4': '安全专项检查',
  '5': '法定自查',
  '6': '自愿报告',
  '7': '安全预警',
  '8': '应急案例',
  '9': '通知公告',
  '10': '审核审计',
  '11': '外部检查'
};

async function getDetail() {
  if (!props.row?.reportId) return;
  loading.value = true;
  try {
    const res = await getReportDetailApi(props.row.reportId);

    if (quillContainerRef.value) {
      quill = new Quill(quillContainerRef.value, {
        theme: "snow",
        readOnly: true,
        modules: {
          toolbar: false
        }
      });
    }

    Object.assign(formData, res.data);
    const base64Str = props.row?.infoDescribe || "";
    const decodedHtml = decodeBase64(base64Str);
    quill.root.innerHTML = decodedHtml || "<p>暂无内容</p>";
  } catch (e) {
    console.error(e);
    ElMessage.error("获取详情失败");
  } finally {
    loading.value = false;
  }
}

// 打开弹窗时初始化数据
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      getDetail();
    }
  }
);
</script>

<template>
  <v-dialog
    show-full-screen
    :fixed-body-height="false"
    use-body-scrolling
    :title="`安全信息详情 - ${formData.title}`"
    v-model="visible"
    :loading="loading"
    @confirm="visible = false"
    @cancel="visible = false"
  >
    <div class="detail-container">
      <el-form :model="formData" label-width="120px" class="detail-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标题">
              <span class="detail-value">{{ formData.title }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <span class="detail-value">{{ statusMap[formData.status]?.text || '未知状态' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="信息来源">
              <span class="detail-value">{{ questionSourceName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发现日期">
              <span class="detail-value">{{ formData.discoveryDate }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发现人">
              <span class="detail-value">{{ formData.discoverUserName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发现地点">
              <span class="detail-value">{{ formData.discoveryPlace }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="责任部门">
              <span class="detail-value">{{ formData.deptName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收部门">
              <span class="detail-value">{{ formData.dealDeptName }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">

        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注">
              <span class="detail-value">{{ formData.feedback }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法律法规依据">
              <span class="detail-value">{{ formData.basis }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>


      <div class="info-describe-section">
        <label class="section-label">详细描述：</label>
        <div ref="quillContainerRef" class="quill-editor"></div>
      </div>


    </div>
  </v-dialog>
</template>

<style scoped lang="scss">
.detail-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.detail-form {
  margin-bottom: 20px;
}

.detail-value {
  font-size: 14px;
  color: #606266;
}

.info-describe-section {
  margin-top: 20px;
}

.section-label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.quill-editor {
  height: auto;
  min-height: 200px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;

  .ql-container {
    border: none;
  }
}
</style>
